import React from 'react'
import styles from './index.module.scss'

// 原理:
// 1. 当卷去的距离 > 当前容器距离页面顶部的距离, 说明需要吸顶了
//    就给content盒子, 加上fixed类, 给placeholder加高
// 2. 否则, 说明正常显示
//    就给content盒子, 移出fixed类, placeholder的高, 清0

class Sticky extends React.Component {
  constructor(props) {
    super(props)
    this.placeholderRef = React.createRef()
    this.contentRef = React.createRef()
  }

  handleScroll = () => {
    // 占位置的盒子
    const placeholderBox = this.placeholderRef.current
    // 实际内容的盒子
    const contentBox = this.contentRef.current
    // 卷去的距离 window.pageYOffset (scrollTop)
    // 容器距离页面顶部的距离 this.placeholderRef.current.offsetTop
    // console.log(window.pageYOffset, this.placeholderRef.current.offsetTop)
    if (window.pageYOffset > placeholderBox.offsetTop) {
      // 需要切换成固定定位
      contentBox.classList.add('fixed')
      placeholderBox.style.height = contentBox.offsetHeight + 'px'
    } else {
      // 恢复成标准流
      contentBox.classList.remove('fixed')
      placeholderBox.style.height = 0
    }
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }

  render() {
    return (
      <div className={styles.sticky}>
        {/* 占位置的盒子, 这个盒子, 只要在下面吸顶的内容固定定位了才会有高度 */}
        <div ref={this.placeholderRef} className="placeholder"></div>
        {/* 将来会吸顶的内容 标准流 <=> 固定定位 */}
        <div ref={this.contentRef} className="content">
          {this.props.children}
        </div>
      </div>
    )
  }
}

export default Sticky
